<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes">
    <title>spirit</title>
    <!-- bootstrap -->
    <link rel="stylesheet" href="./assets/css/bootstrap.min.css" />

    <!-- animate.css -->
    <link rel="stylesheet" href="./assets/css/animate.min.css" />

    <!-- 重置样式 -->
    <link rel="stylesheet/less" href="./assets/css/reset.less" />

    <!-- 公共样式 -->
    <link rel="stylesheet/less" href="./assets/css/common.less" />

    <!-- 页面独立的 -->
    <link rel="stylesheet/less" href="./assets/css/index.less" />
</head>
<body>
   
    <!-- 头部 -->
    <header class="header" id="header">
        <nav class="navbar navbar-fixed-top">
            <div class="container">
                <!-- LOGO -->
                <div class="navbar-header">
                    <button type="button" class="navbar-toggle" data-toggle="collapse"
                        data-target=".navbar-collapse" >
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>
                    <a class="logo wow fadeInLeft" href="javascript:void(0)">
                        <img src="./assets/images/sky-logo-header.png" alt="">
                    </a>
                </div>
                <!-- 导航 -->
                <div class=" navbar-collapse collapse" id="bs-example-navbar-collapse-1" >
                    <ul class="nav navbar-nav navbar-right">
                        <li><a href="index.html" class="wow fadeInRight animated" data-wow-delay="100ms">首页</a></li>
                        <li><a href="tow.html" class="wow fadeInRight animated" data-wow-delay="200ms">按摩</a></li>
                        <li><a href="three.html" class="wow fadeInRight animated" data-wow-delay="300ms">别墅Party</a>
                        </li>
                        <li><a href="index.html" class="wow fadeInRight animated" data-wow-delay="400ms">首页</a></li>
                        <li><a href="tow.html" class="wow fadeInRight animated"
                                data-wow-delay="500ms">按摩</a></li>
                        <li><a href="three.html" class="wow fadeInRight animated" data-wow-delay="600ms">别墅Party</a></li>
                    </ul>
                </div>
            </div>
        </nav>
    </header>

    <!-- banner -->
    <div class="section-slider height-v" id="banner">
        <!-- <img src="./assets/images/Slider-v1.jpg" alt="" id="background"> -->
        <div class=" owl-carousel  owl-theme owl-loaded owl-drag">
            <div class="owl-stage-outer">
                <div class="item">
                    <img src="./assets/images/Slider-v1.jpg" alt="" class="img-responsive">
                    <div class="carousel-caption">
                        <h1 class="title wow lightSpeedIn animated" data-wow-delay="100ms">
                            欢迎来到布吉岛
                        </h3>
                        <p class="info wow fadeInUp animated" data-wow-delay="200ms">
                            <span class="line-t"></span>
                            酒店 & 度假村 
                            <span class="line-b"></span>
                        </p>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- room -->
    <div class="rooms">
        <div class="container">
            <h2 class="title-room">我们的房间</h2>
            <div class="outline"></div>
            <p class="rooms-p">
                当你举办派对或家庭聚会时，特别的庆祝活动让你与
            </p>
            <div class="wrap-rooms">
                <div class="row">
                    <div id="rooms" class="owl-carousel owl-theme owl-loaded owl-drag">
                        <div class="owl-stage-outer">
                            <div class="owl-item active" >
                                <div class="item">
                                    <div class="col-lg-4 col-md-4 col-sm-6 col-xs-6 ">
                                        <div class="wrap-box">
                                            <div class="box-img">
                                                <img src="./assets/images/our-1.jpg" class="img-responsive" alt="PLuxury Room">
                                            </div>
                                            <div class="rooms-content">
                                                <h4 class="sky-h4">带豪华客房</h4>
                                                <p  class="price">$320 / 每晚</p>
                                            </div>
                                        </div>

                                        
                                    </div>

                                    <div class="col-lg-4 col-md-4 col-sm-6 col-xs-6 ">
                                        <div class="wrap-box">
                                            <div class="box-img">
                                                <img src="./assets/images/our-2.jpg" class="img-responsive" alt="PLuxury Room">
                                            </div>
                                            <div class="rooms-content">
                                                <h4 class="sky-h4">带豪华家具</h4>
                                                <p  class="price">$320 / 每晚</p>
                                            </div>
                                        </div>
                                    </div>

                                    <div class="col-lg-4 col-md-4 col-sm-6 col-xs-6 ">
                                        <div class="wrap-box">
                                            <div class="box-img">
                                                <img src="./assets/images/our-3.jpg" class="img-responsive" alt="PLuxury Room">
                                            </div>
                                            <div class="rooms-content">
                                                <h4 class="sky-h4">带豪华客厅</h4>
                                                <p  class="price">$320 / 每晚</p>
                                            </div>
                                        </div>
                                    </div>

                                    <div class="col-lg-4 col-md-4 col-sm-6 col-xs-6 ">
                                        <div class="wrap-box">
                                            <div class="box-img">
                                                <img src="./assets/images/our-4.jpg" class="img-responsive" alt="PLuxury Room">
                                            </div>
                                            <div class="rooms-content">
                                                <h4 class="sky-h4">带豪华浴室</h4>
                                                <p  class="price">$320 / 每晚</p>
                                            </div>
                                        </div>
                                    </div>

                                    <div class="col-lg-4 col-md-4 col-sm-6 col-xs-6 ">
                                        <div class="wrap-box">
                                            <div class="box-img">
                                                <img src="./assets/images/our-5.jpg" class="img-responsive" alt="PLuxury Room">
                                            </div>
                                            <div class="rooms-content">
                                                <h4 class="sky-h4">豪华双人房</h4>
                                                <p  class="price">$320 / 每晚</p>
                                            </div>
                                        </div>
                                    </div>

                                    <div class="col-lg-4 col-md-4 col-sm-6 col-xs-6 ">
                                        <div class="wrap-box">
                                            <div class="box-img">
                                                <img src="./assets/images/our-6.jpg" class="img-responsive" alt="PLuxury Room">
                                            </div>
                                            <div class="rooms-content">
                                                <h4 class="sky-h4">豪华海景房</h4>
                                                <p  class="price">$320 / 每晚</p>
                                            </div>
                                        </div>
                                    </div>

                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- about  -->
    <div class="about">
        <div class="container">
            <div class="row">
                <div class="col-xs-12 col-sm-6 col-md-5 col-lg-5">
                    <div class="about-centent">
                        <h2 class="about-title">关于我们</h2>
                        <div class="line"></div>
                        <p class="about-p">
                            与普遍的看法相反，Lorem并不是简单的随机文本。

                            它起源于公元前45年的一系列古典拉丁文学，

                            使其具有2000多年的历史。Avalon领先的酒店

                            岛上热情好客，设施周到，特色鲜明
                        </p>
                        <p class="about-p1">
                            理查德·麦克林托克，澳大利亚汉普登悉尼学院拉丁语教授

                            弗吉尼亚，查到了一个比较晦涩的拉丁词，concetetur，

                            从Lorem Ipsum的一段话。。。
                        </p>
                        <a href="#" class="read-more">阅读更多信息 </a>
                    </div>
                </div>
                <div class="col-xs-12 col-sm-6 col-md-7 col-lg-7 ">
                    <div class="about-img">
                        <div class="img-1">
                            <img src="./assets/images/about-3.jpg" alt="" class="img-responsive">
                            <div class="img-2">
                                <img src="./assets/images/about-1.jpg" alt="" class="img-responsive">
                            </div>
                            <div class="img-3">
                                <img src="./assets/images/about-2.jpg" alt="" class="img-responsive">
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- about  -->
    <div class="highest text-center">
        <div class="container">
            <h3>
                最高质量的材料 
                <span>和完美的体验</span>
            </h3>
            <p>
                因为你们什么时候应当作奴仆，劳碌，穷乏。

                经常发生的情况是，志愿者会被计算在内，而麻烦不会被计算在内。

                所以这件事瞒着智慧人，好叫你们回去。

                最伟大的会随之而来或遭受更痛苦的痛苦。
            </p>
            <a href="#" class="hvr-shutter-in-horizontal button">
                更多
            </a>
        </div>
    </div>

    <!-- about -->
    <div class="collections">
        <div class="container">
            <h3 class="tittle-two">家具设计</h3>
            <div class="collection-grids cs-style-1">
                <div class="col-md-4 collection-grid grid">
                    <figure>
                        <img src="./assets/images/g1.jpg" alt="">
                        <figcaption>
                            <h3>LUXUS</h3>
                            <span>Accusantium Dolor</span>
                            <a href="#" class="example-image-link">
                                MORE
                            </a>
                        </figcaption>
                    </figure>
                </div>
                <div class="col-md-8 collection-grid grid">
                    <figure>
                        <img src="./assets/images/2 (1).jpg" alt="">
                        <figcaption>
                            <h3>LUXUS</h3>
                            <span>Accusantium Dolor</span>
                            <a href="#" class="example-image-link">
                                MORE
                            </a>
                        </figcaption>
                    </figure>
                </div>
                <div class="col-md-4 collection-grid grid">
                    <figure>
                        <img src="./assets/images/g66.jpg" alt="">
                        <figcaption>
                            <h3>LUXUS</h3>
                            <span>Accusantium Dolor</span>
                            <a href="#" class="example-image-link">
                                MORE
                            </a>
                        </figcaption>
                    </figure>
                </div>
                <div class="col-md-4 collection-grid grid">
                    <figure>
                        <img src="./assets/images/g44.jpg" alt="">
                        <figcaption>
                            <h3>LUXUS</h3>
                            <span>Accusantium Dolor</span>
                            <a href="#" class="example-image-link">
                                MORE
                            </a>
                        </figcaption>
                    </figure>
                </div>
                <div class="col-md-4 collection-grid grid">
                    <figure>
                        <img src="./assets/images/g55.jpg" alt="">
                        <figcaption>
                            <h3>LUXUS</h3>
                            <span>Accusantium Dolor</span>
                            <a href="#" class="example-image-link">
                                MORE
                            </a>
                        </figcaption>
                    </figure>
                </div>
                <div class="col-md-8 collection-grid grid">
                    <figure>
                        <img src="./assets/images/g3.jpg" alt="">
                        <figcaption>
                            <h3>LUXUS</h3>
                            <span>Accusantium Dolor</span>
                            <a href="#" class="example-image-link">
                                MORE
                            </a>
                        </figcaption>
                    </figure>
                </div>
                <div class="col-md-4 collection-grid grid">
                    <figure>
                        <img src="./assets/images/g7.jpg" alt="">
                        <figcaption>
                            <h3>LUXUS</h3>
                            <span>Accusantium Dolor</span>
                            <a href="#" class="example-image-link">
                                MORE
                            </a>
                        </figcaption>
                    </figure>
                </div>
            </div>
        </div>
    </div>

    <!-- FOOTER -->
    <footer class="footer-sky">
        <div class="footer-top">
            <div class="container">
                <div class="row">
                    <div class="col-xs-12 col-sm-12 col-md-1 col-lg-1">
                        <div class="icon-email">
                            <a href="#" title="Email" style="display: block;">
                                <img src="./assets/images/footer-top-icon-l.png" alt="" class="img-responsive">
                            </a>
                        </div>
                    </div>
                        <div class="col-xs-12 col-sm-12 col-md-7 col-lg-5">
                            <div class="textbox">
                                <form class="form-inline">
                                    <div class="form-group">
                                        <div class="input-group">
                                            <input type="email" class="form-control" placeholder="Your email address">
                                            <button class="btn btn-secondary" type="button">
                                                <i class="ion-android-send"></i>
                                            </button>
                                        </div>
                                    </div>
                                </form>
                            </div>
                        </div>
                        <div class="col-xs-12 col-sm-12 col-md-4 col-lg-6 text-right">
                            <div class="footer-icon-l">
                                <a href="#">
                                    <i class="fa fa-twitter" aria-hidden="true"></i>
                                </a>
                                <a href="#">
                                    <i class="fa fa-facebook-square" aria-hidden="true"></i>
                                </a>
                                <a href="#">
                                    <i class="fa fa-tripadvisor" aria-hidden="true"></i>
                                </a>
                                <a href="#">
                                    <i class="fa fa-instagram" aria-hidden="true"></i>
                                </a>
                            </div>
                        </div>
                </div>
            </div>
        </div>
        <div class="footer-mid">
            <div class="container">
                <div class="row padding-footer-mid">
                    <div class="col-xs-12 col-sm-12 col-md-3 col-lg-3">
                        <div class="footer-logo text-center list-content">
                            <a href="index.html">
                                <img src="./assets/images/sky-logo-footer.png" alt="">
                            </a>
                        </div>
                    </div>
                    <div class="col-xs-4 col-sm-4 col-md-2
                     col-lg-2 col-lg-offset-1 col-md-offset-1  ">
                     <div class="list-content">
                         <ul>
                             <li>
                                 <a href="#">Site Map</a>
                             </li>
                             <li>
                                <a href="#">Term & Conditions</a>
                            </li>
                            <li>
                                <a href="#">Privacy Policy</a>
                            </li>
                            <li>
                                <a href="#">Help</a>
                            </li>
                            <li>
                                <a href="#">Affiliate</a>
                            </li>
                         </ul>
                     </div>
                    </div>
                    <div class="col-xs-4 col-sm-4 col-md-2
                     col-lg-2 col-lg-offset-1 col-md-offset-1  ">
                     <div class="list-content">
                         <ul>
                             <li>
                                 <a href="#">Our Location</a>
                             </li>
                             <li>
                                <a href="#">Career</a>
                            </li>
                            <li>
                                <a href="#">About Us</a>
                            </li>
                            <li>
                                <a href="#">Contact Us</a>
                            </li>
                         </ul>
                     </div>
                    </div>
                    <div class="col-xs-4 col-sm-4 col-md-2
                     col-lg-2 col-lg-offset-1 col-md-offset-1  ">
                     <div class="list-content">
                         <ul>
                             <li>
                                 <a href="#">FAQS</a>
                             </li>
                             <li>
                                <a href="#">News</a>
                            </li>
                            <li>
                                <a href="#">Photo & Video</a>
                            </li>
                            <li>
                                <a href="#">Restaurant</a>
                            </li>
                            <li>
                                <a href="#">Gift Card</a>
                            </li>
                         </ul>
                     </div>
                    </div>
                </div>
                <div class="footer-bottom"></div>
            </div>
        </div>
    </footer>

    <!-- 返回顶部 -->
    <!-- <div id="back">
		<a href="#banner" id="gotop">
			<img src="./assets/images/top.svg" />
        </a>
	</div> -->




</body>
</html>
<!-- 解析less的文件 -->
<script src="./assets/js/less.min.js"></script>

<!-- jquery  -->
<script src="./assets/js/jquery.min.js"></script>

<!-- bootstrap -->
<script src="./assets/js/bootstrap.min.js"></script>

<!-- wow.js -->
<script src="./assets/js/wow.min.repeat.js"></script>

<script>
    //获取id为background的元素
    var background = document.getElementById("background")

    //将视频速度调慢
    background.playbackRate = 10

    //实例化wow.js
    new WOW().init()


    // 滚动监听
    // a href == id 
    //锚点跳转滑动效果  
    $('#bs-example-navbar-collapse-1 a[href],#banner a[href],#back a[href]').click(function() {  
        if (location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') && location.hostname == this.hostname) {  
            var $target = $(this.hash);  
            $target = $target.length && $target || $('[name=' + this.hash.slice(1) + ']');  
            if ($target.length) {  
                var targetOffset = $target.offset().top;  
                $('html,body').animate({  
                            scrollTop: targetOffset  
                },1000);  
                return false;  
            }  
        }  
    });  

    //给页面绑定一个滚动条事件
    $(document).scroll(function(){
        //获取滚动条滚动长度大小
        var distance = $(this).scrollTop()

        //当滚动条滚动的长度大于10
        if(distance > 10)
        {
            //显示返回顶部
            $("#gotop").css({zIndex:99998,opacity:1});
            $("#header").css({backgroundColor:'#111111',paddingBottom:0});
        }else
        {
            //隐藏返回顶部
            $("#gotop").css({zIndex:-99998,opacity:0});
            $("#header").css({backgroundColor:'transparent',paddingBottom:'1em'});
        }
    })
</script>